<div id="alerts" class="container-fluid">
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> 
    <div class="alertMessage" ng-bind-html="alert.msg"> </div> 
  </alert>
</div>
 <div class="padding-all ">
 <div ng-include src="'/ksr/partials/breadcrumb.htm'"></div>
 </div>
 <div class="padding-all ">
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading bold">
    Create a new office
  </div>
  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">
      <a href="#/office/new" class="block">Add an office</a>
      <div>Add a new office to your business</div>
    </li>
  </ul>
</div>
<div class="panel panel-default" ng-repeat="office in offices">
  <!-- Default panel contents -->
  <div class="panel-heading">
  	<span class="bold">Office in <span class="font-orange">{{office.address.city}}</span></span>
            <button type="button" class="btn btn-danger btn-xs pull-right" ng-click="deleteOffice(office.id)" >Remove</button>
	</div>
  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">
    	<a href="#/office/{{office.id}}" class="block"><span>Edit office information</span></a>
    </li>
    <li class="list-group-item">
    	<a href="#/office-photos/{{office.id}}" class="block"><span>Add or remove photos</span></a>
      <div class="margin-top" ng-if="office.pictures">
        <span class="margin-bottom" ng-class="{'margin-right':!$last}" ng-repeat="pic in office.pictures">
         <img ng-src="{{baseUrl}}{{pic.rootPath}}{{pic.pictureFolder}}/{{pic.square90ImageFilename}}"  class="round-corner" ng-class="{'border-all-orange':pic.id===office.primaryPicture.id}"/>
      </span>
      </div>  
    </li>
    <li class="list-group-item" ng-if="office.reviewCount>0">
        <div class="margin-bottom">
          <a ng-href="#/office-reviews/{{office.id}}"><span class="inline-block margin-right">View the office Reviews</span></a> 
          ({{office.reviewCount}} review<span ng-show="office.reviewCount>1">s</span>)
        </div>
        <div class="margin-bottom margin-left">
           <span class="glyphicon glyphicon-stats text-danger"></span>
           Rating distribution
        </div>
        <ksr-rating-distribution review-numbers={{office.reviewNumbers}}></ksr-rating-distribution>
      </li> 
    <li class="list-group-item" ng-if="office.reviewCount===0">
        There is no review for the office
      </li>  
  </ul>
</div>
 </div>
 <!-- 
 <pre ng-bind="offices | json"></pre>
 <pre ng-bind="business | json"></pre>
 <br/>
  -->